.modal {
  position: fixed;
  background-color: #7f7f7f; 
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 999;

  .close {
    width: 100%;
    height: 100%;
  }

  .center {
    position: fixed;
    padding: 50px;
    left: 50%;
    top: 50%;
    border-radius: 30px;
    transform: translate(-50%,-50%);
    background-color: #fff;
    z-index: 9999;
  }   

  .top {
    position: fixed;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    background-color: #fff;
    width: 100%;
    padding: 50px;

    // transform: translate(-100%,0);
  }

  .right {
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
    transform: translate(100%, 0);
  }

  .left {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    transform: translate(-100%, 0);
  }

  .bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translate(0, 100%);
  }


}
